<template>
  <div class="app-container documentation-container">
    <div class="top">
      <div class="add_zhandian">
        <el-button type="primary" icon="el-icon-plus" @click.native="addsite">添加批次</el-button>
      </div>
      <div class="selech">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="批次编号">
            <el-input v-model="formInline.user" placeholder="请输入批次编号" />
          </el-form-item>
          <el-form-item label="产品名称">
            <el-input v-model="formInline.user" placeholder="请输入产品名称查询" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click.native="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%;margin-top:30px;"
    >
      <el-table-column
        fixed
        prop="num"
        label="序号"
        width="50"
      />
      <el-table-column
        prop="name"
        label="产品名称"
        width="120"
      />
      <el-table-column
        prop="address"
        label="批次编号"
        width="180"
      />
      <el-table-column align="center" label="操作" width="130">
        <template slot-scope="scope">
          <img :src="scope.row.city" alt="" class="imas">
        </template>
      </el-table-column>
      <el-table-column
        prop="zip"
        label="二维码扫描次数"
        width="100"
      />
      <!--<el-table-column-->
        <!--prop="phone"-->
        <!--label="联系电话"-->
        <!--width="120"-->
      <!--/>-->
      <el-table-column
        prop="date"
        label="创建时间"
        width="180"
      />
      <el-table-column align="center" label="操作" width="320">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope)">导出二维码</el-button>
          <el-button type="primary" size="small" @click="handleEdit(scope)">录入信息</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope)">删除批次</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import codeimg from "@/assets/code.png"
export default {
  name: 'Documentation',

  components: { },
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      tableData: [{
        date: '2016-05-02',
        name: '苹果',
        province: '上海',
        city: codeimg,
        address: '52553',
        zip: 200333,
        phone: '13356565252',
        num: '1'
      }, {
        date: '2016-05-04',
        name: '西瓜',
        province: '上海',
        city: codeimg,
        address: '5461321',
        zip: 200333, phone: '13356565252',
        num: '1'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: codeimg,
        address: '51684',
        zip: 200333, phone: '13356565252',
        num: '1'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: codeimg,
        address: '51654',
        zip: 200333, phone: '13356565252',
        num: '1'
      }]

    }
  },
  methods: {
    handleClick(row) {
      // console.log(row)
    },
    onSubmit() {
    },
    addsite() { // 新增站点
      this.$router.push({ path: '/addsite/addsitePage' })
    }
  },
  mounted() {
    // 生命周期
    // console.log(this.tableData);
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

  .red_{
    color: red;
  }

/*手机*/
  @media screen and (min-width:100px) and (max-width:960px){
    .top{
      width:100%;
      height:147px;

    }
    .add_zhandian{
      width:100%;
      height:50px;
    }
    .selech{
      width:100%;
      height:50px;
    }
  }
  /*PC*/
  @media screen and (min-width:960px) and (max-width:1900px){
    .top{
      width:100%;
      height:50px;
    }
    .add_zhandian{
      width:20%;
      height:100%;
      float: left;
    }
    .selech{
      width:79%;
      height:100%;
      float: right;
    }
  }
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
  .imas{
    width:50px;
    height:50px;
  }
</style>
